<template>
  <div class="dialog-content">
    <el-dialog
      :title="title"
      v-model="visible"
      :close-on-click-modal="false"
      width="500px"
      :before-close="handleClose"
    >
      <div
        id="detail-center"
        style="overflow:hidden; overflow-y: auto; max-height: 50vh;"
      >
        <el-form
          ref="refruleForm"
          :model="form"
          :rules="rules"
          label-width="70px"
        >
          <el-form-item label="提示" prop="content">
            <el-input type="textarea" v-model="form.content" :placeholder="'请输入'+title" rows="8" maxlength="400" show-word-limit/>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleClose">取 消</el-button>
          <el-button type="primary" @click="handleSubmit">保 存</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, reactive } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { editProjectHint,changeProjectInfo } from "@/api/service/project.ts";
export default defineComponent({
  components: {
  },
  props: {
    visible: {
      type: Boolean,
      default: null
    },
    title: {
      type: String,
      default: "项目提示配置"
    },
    dialogInfo: {
      type: Object,
      default: {}
    }
  },
  setup(props, ctx) {
    const refruleForm: any = ref(null);
    const form: any = reactive({
      content: props.dialogInfo.content || ''
    });
    // 必填校验
    const rules = reactive({
      content: [
        {
          required: true,
          message: "请输入"+props.title+"内容",
          trigger: "blur",
        },
      ],
    });
    // 取消
    const handleClose = () => {
      ctx.emit("closePromptDialog");
    };
    // 保存
    const handleSubmit = () => {
      refruleForm.value.validate((valid: Boolean) => {
        if (valid) {
          editProjectHintFun()
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    }
    // 保存函数
    const editProjectHintFun = () => {
     
      let data = {
        id: props.dialogInfo.id,
        content: form.content
      }
      if(props.dialogInfo.cmd){
        ctx.emit("surePromptDialog", data);
        return
      }
      editProjectHint(data).then((res: any) => {
        if (res.code === 200) {
          ElMessage.success('保存成功！')
          ctx.emit("closePromptDialog", form.content);
        }
      })
    }
    
    return {
      refruleForm,
      form,
      rules,
      handleSubmit,
      handleClose,
      editProjectHintFun
    };
  }
});
</script>

<style lang="scss" scoped>
.dialog-content {
  

}
</style>